<template>
  <div class="container">
    <div class="header">
      <div class="header_address" @click="positioning">
        <div class="header_address_img" @click="getMyPosition()">
          <img src="../assets/home_01.png" alt>
        </div>
        <p style="padding: 0 0 0 0.1rem;">{{myPosition}}</p>
      </div>
      <div class="header_cont">
        <div class="header_cont_img">
          <img src="../assets/home_02.png" alt>
        </div>
        <p>壹键优品</p>
      </div>
      <div class="header_picture">
        <div class="header_picture_img">
          <!-- <img src="../assets/home_03.png" alt> -->
        </div>
          <a href="/#/Goods-classify">
        <div class="header_picture_img1">
            <img src="../assets/fenlei2.png" alt>
        </div>
          </a>
      </div>
    </div>
    <div class="content">
      <div class="content_input">
        <div class="content_input_img">
          <!-- <img src="../assets/home_05.png" alt> -->
        </div>
        <input type="text" placeholder="请输入关键词搜索" v-model="searchText" >
        <div class="content_input_img1" @click="goToSearchList()">
          <img src="../assets/home_05.png" alt>
        </div>
      </div>
      <div class="content_list">
        <ul>
          <li @click="toxpcx">
            <div class="content_list_one" style="background:#2EDB94">
              <img src="../assets/home_07.png" alt>
            </div>
            <p>新品尝鲜</p>
          </li>
          <li @click="toptqg">
            <div class="content_list_one" style="background:#2274D9">
              <img src="../assets/home_08.png" alt>
            </div>
            <p>拼团抢购</p>
          </li>
          <li @click="toxsqg">
            <div class="content_list_one" style="background:#FF9F4D">
              <img src="../assets/home_09.png" alt>
            </div>
            <p>限时抢购</p>
          </li>
          <li @click="tolhb">
            <div class="content_list_one" style="background:#FF506A">
              <img src="../assets/home_10.png" alt>
            </div>
            <p>签到领红包</p>
          </li>
          <li @click="totxzq">
            <div class="content_list_one" style="background:#834DFE">
              <img src="../assets/home_11.png" alt>
            </div>
            <p>特享专区</p>
          </li>
        </ul>
      </div>
      <div class="content_all">
        <div class="content_all_left">
          <p></p>
          <span>热门</span>
        </div>
        <a href="/#/Goods-classify">
          <div class="content_all_right">
            <p>全部</p>
            <span>></span>
          </div>
        </a>
      </div>
      <div class="bbss">
        <swiper class="content_cloth" :options="swiperOption" v-if="dataList.length>0">
          <swiper-slide v-for="(item,k) in dataList" :key="k">
            <div class="content_cloth_img" @click="imgClick(item)">
              <img :src="item.img" alt >
            </div>
            <div class="content_cloth_money">
              <p>{{item.name}}</p>
              <div class="content_cloth_money1">
                <p>￥{{item.sell_price}}</p>
                <span>￥{{item.market_price}}</span>
              </div>
            </div>
            <div class="content_cloth_detail">
              <div>
                <div
                  @click="callAndroid(item)">
                  <div class="content_cloth_detail_one">
                    <img src="@/assets/share2.png" >
                    <p>{{item.share}}</p>
                  </div>
                </div>
              </div>
              <div class="content_cloth_detail_one" @click="clickZan(k)" v-if="item.agreeCount == 0" style="filter: grayscale(100%);">
                <img src="@/assets/home_17.png">
                <span>{{item.agree}}</span>
              </div>
              <div class="content_cloth_detail_one" @click="clickZan(k)" v-else>
                <img src="@/assets/home_17.png">
                <span>{{item.agree}}</span>
              </div>
                <a @click="goo(item.id)">查看详情</a>
            </div>
          </swiper-slide>
        </swiper>
        <van-dialog
          v-model="show"
          :show-confirm-button="false"
          :before-close="beforeClose"
          :close-on-click-overlay="true"
          class="shadow-vant"
        >
          <div class="content_cloth_alert">
            <div class="content_cloth_img">
              <img :src="item.img" >
            </div>
            <p class="title">
              {{item.name}}
            </p>
            <div class="buy">
              <div class="money">
                <span>￥{{item.sell_price}}</span>
                <span>￥{{item.market_price}}</span>
              </div>
              <div class="buy-button">
                <div class="button"  @click="goo(item.id)">立即购买</div>
              </div>
            </div>
          </div>
        </van-dialog>
      </div>
    </div>
    <footer-nav :active="0"></footer-nav>
    <!-- 拖拽购物车功能 -->
    <!-- <div @click="goo()" class="mini-img"><img src="@/assets/home_15.png" alt=""  @mousedown="move"></div> -->
    <div class="mini-img" id="moveDiv" ref="moveImg"
        @touchstart.stop="down"
        @touchmove.stop="move"
        @touchend.stop="end">
      <img src="@/assets/home_15.png" alt="" @click="goToShopingCar()">
    </div>
    <!-- 选择省区 -->
    <div v-if="showArea" class="area">
      <van-area value="110101" :area-list="areaList" :columns-num="3" @confirm="onConfirm" @cancel="onCancel"/>
    </div>
    <div v-if="showArea" class="areaShadow" @click.stop="onCancel()"></div>
  </div>
</template>

<script>
import { GetQuery} from '@/api/Request'
import 'swiper/dist/css/swiper.css'
import { Dialog } from 'vant';
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import FooterNav from "../components/FooterNav";
import request from "../../static/base.js";
import { setTimeout } from 'timers';
import { Toast } from 'vant'
import { Area } from 'vant';
import area from "../../static/area.js";
export default {
  name: "Home",
  data() {
    return {
      dataList: [],
      show: false,
      item:{},
      swiperOption: {
        direction: 'vertical',
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        loop: true,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
      },
      searchText: '',
      myPosition: '', //我的位置,
      // 拖拽
      flags: false,
      position: { x: 0, y: 0 },
      nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
      screenWidth: null,
      screenHeight: null,
      elementWidth: null,
      elementHeight: null,
      areaList: area,      //地区
      showArea:false,      //选择地址显示
    };
  },
  components: {
    FooterNav,
    swiper,
    swiperSlide
  },
  created() {
    // this.get_data();
    // window.nativeShare = this.nativeShare
  },
  mounted(){
    GetQuery("?controller=theapi&action=getCommendHot",{limit:10}).then(res=>{
        // 注入agreeCount 用于判断点赞
        res.data.forEach(item => {
          item.agreeCount = 0;
        });
        this.dataList = res.data
    })
    // 定位
    this.$nextTick(() => {
      this.getMyPosition()
    })
    //拖拽
    this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    this.screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    this.elementWidth = parseInt(window.getComputedStyle(this.$refs.moveImg).width)
    this.elementHeight = parseInt(window.getComputedStyle(this.$refs.moveImg).height)

    window.nativeShare = this.nativeShare
    window.callAndroid = this.callAndroid
    console.log(window)
  },
  methods: {
    nativeShare(a){
      console.log(a)
    },
    // 原生分享
    callAndroid(item){
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {  //判断iPhone|iPad|iPod|iOS
        // alert(navigator.userAgent);
        window.nativeShare({words:item.name, img:item.img, url:`http://app.ztsx123.com/#/ProductDetails?id=${item.id}`})
      } else if (/(Android)/i.test(navigator.userAgent)) {   //判断Android
        // alert(navigator.userAgent);
        mmtest.funccc(`${item.name}`, `${item.img}`, `http://app.ztsx123.com/#/ProductDetails?id=${item.id}`)
      } else {  //pc
        console.log(navigator.userAgent)
      };
    },
    // 地址选择确定
    onConfirm(e){
      this.showArea = false;
      this.myPosition = e[1].name;
      localStorage.setItem('myPosition',JSON.stringify(this.myPosition))
    },
    // 地址选择取消
    onCancel(){
      this.showArea = false;
    },
    imgClick(data){
      this.show = true
      this.item = data
    },
    beforeClose(action, done) {
      if (action === 'confirm') {
        setTimeout(done, 1000);
      } else {
        done();
      }

    },
    goo(id){
      this.$router.push({
        name:'ProductDetails',
        params:{
          id: id,
          page:1
        }
      })
    },
    goToShopingCar(){
      this.$router.push({
        name:'ShoppingCart'
      })
    },
    // get_data() {
    //   request({
    //     url: "?controller=theapi&action=getCommendHot",
    //     method: "get",
    //     params: {
    //       limit: 10
    //     }
    //   }).then(res => {
    //     this.dataList = res.data;
    //   });
    // },
    toxpcx(){
      window.location.href="http://app.ztsx123.com/1/#/twentyfive"
    },
    toptqg(){
      // window.location.href="http://app.ztsx123.com/1/#/pintuanyouhui"
      this.$router.push({
        name: 'groupList'
      })
    },
    toxsqg(){
      window.location.href="http://app.ztsx123.com/1/#/twentyfour"
    },
    tolhb(){
      window.location.href="http://app.ztsx123.com/1/#/qiandao"
    },
    totxzq(){
      // window.location.href="http://app.ztsx123.com/1/#/fifteen"
      this.$router.push('texiangzhuanqu');
    },
    // 点赞
    clickZan(index){
      if(this.dataList[index].agreeCount == 0){
        this.dataList[index].agree = Number(this.dataList[index].agree) + 1
        this.dataList[index].agreeCount = 1
      }else{
        this.dataList[index].agree = Number(this.dataList[index].agree) - 1
        this.dataList[index].agreeCount = 0
      }
    },
    // 搜索
    goToSearchList(){
      if(/\S/.test(this.searchText)){
        this.$router.push({
          name: 'searchlist',
          params: {
            text: this.searchText
          }
        })
      }
    },
    // 手动定位
    positioning(){
      this.showArea = true;
    },
    getMyPosition(){
      let position = JSON.parse(localStorage.getItem('myPosition'))
      if(!position){
        Dialog.confirm({
          title: '提示',
          message: '授权获取位置信息'
        }).then(() => {
          // on confirm
          let _this = this
          let geolocation = new BMap.Geolocation();
          function myFun(result){
            let cityName = result.name;
            console.log(result.name)
            _this.myPosition = cityName;
            localStorage.setItem('myPosition',JSON.stringify(cityName))
          }
          let myCity = new BMap.LocalCity();
          myCity.get(myFun);
        }).catch(() => {
          Toast('获取定位失败')
        })
      }else{
        this.myPosition = position
      }
    },
    // 实现移动端拖拽
    down(){
      this.flags = true;
      var touch;
      if(event.touches){
          touch = event.touches[0];
      }else {
          touch = event;
      }
      this.position.x = touch.clientX;
      this.position.y = touch.clientY;
      this.dx = moveDiv.offsetLeft;
      this.dy = moveDiv.offsetTop;
    },
    move(){
      if(this.flags){
        var touch ;
        if(event.touches){
            touch = event.touches[0];
        }else {
            touch = event;
        }
        this.nx = touch.clientX - this.position.x;
        this.ny = touch.clientY - this.position.y;
        let x = this.dx+this.nx
        let y = this.dy+this.ny
        if(x < 0){
          x = 0
        }
        if(x>this.screenWidth - this.elementWidth){
          x = this.screenWidth - this.elementWidth
        }
        if(y<0){
          y=0
        }
        if(y>this.screenHeight - this.elementHeight){
          y=this.screenHeight - this.elementHeight
        }

        this.xPum = x
        this.yPum = y
        moveDiv.style.left = this.xPum+"px";
        moveDiv.style.top = this.yPum +"px";
        // //阻止页面的滑动默认事件
        // document.addEventListener("touchmove",function(){
        //     event.preventDefault();
        // }, { passive: false });
      }
    },
    //鼠标释放时候的函数
    end(){
      this.flags = false;
      // document.removeEventListener('touchmove', event.preventDefault, { passive: false });
    },
  }
};
</script>

<style>
* { touch-action: pan-y; }
</style>

<style lang="scss" scoped>
@import "@/lib/reset.scss";
html,
body,
.container {
  @include rect(100%, 100%); // 宽为100%, 高为100%
}

.container {
  // @include flex();
  @include flexbox();
  @include flex-direction(column);
  @include justify-content(space-between);
  .header {
    position: fixed;
    top: 0;
    @include rect(100%, 0.88rem);
    @include padding(0 0.3rem 0);
    @include flexbox();
    @include justify-content(space-between);
    background: #fff;
    .header_address {
      @include flexbox();
      @include rect(33.33%, 100%);
      @include justify-content(space-between);
      @include align-items(center);
      .header_address_img {
        min-width: 0.24rem;
        @include rect(0.24rem, 0.32rem);
        > img {
          @include rect(100%, 100%);
        }
      }
      > p {
        width: 2.5rem;
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
        font-size: 0.28rem;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: #191e2a;
      }
    }
    .header_cont {
      @include flexbox();
      @include rect(33.33%, 100%);
      @include justify-content(center);
      @include align-items(center);
      .header_cont_img {
        @include rect(0.38rem, 0.38rem);
        margin: 0 0.1rem 0 0;
        > img {
          @include rect(100%, 100%);
        }
      }
      > p {
        font-size: 0.26rem;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: #43474e;
      }
    }
    .header_picture {
      @include flexbox();
      @include rect(33.33%, 100%);
      @include justify-content(space-between);
      @include align-items(center);
      .header_picture_img {
        @include rect(0.4rem, 0.32rem);
        > img {
          @include rect(100%, 100%);
        }
      }
      .header_picture_img1 {
        @include rect(0.57rem, 0.57rem);
        > img {
          @include rect(100%, 100%);
        }
      }
    }
  }
  .content {
    position: fixed;
    top: 0;
    left: 0;
    @include margin(0.9rem 0 0 0);
    @include flex();
    @include rect(100%, auto);
    @include overflow();
    @include flex-direction(column);
    @include padding(0 0.3rem 0.98rem);
    .content_input {
      @include rect(100%, 0.7rem);
      background: #f8f8f8;
      @include border-radius(0.14rem);
      @include flexbox();
      @include align-items(center);
      @include margin(0.2rem 0 0 0);
      .content_input_img {
        @include rect(0.35rem, 0.34rem);
        @include margin(0 0rem 0);
        > img {
          @include rect(100%, 100%);
        }
      }
      > input {
        border: none;
        background: #f8f8f8;
        @include rect(100%, 100%);
      }
      .content_input_img1 {
        @include rect(0.41rem, 0.36rem);
        @include margin(0 0.16rem 0);
        > img {
          @include rect(100%, 100%);
        }
      }
    }
    .content_list {
      @include rect(100%, 2rem);
      > ul {
        @include rect(100%, 100%);
        @include flexbox();
        @include justify-content(space-between);
        @include align-items(center);
        li {
          height: 1.46rem;
          @include flexbox();
          @include flex-direction(column);
          @include justify-content(space-around);
          @include align-items(center);
          .content_list_one {
            @include rect(0.84rem, 0.84rem);
            border-radius: 0.24rem;
            @include flexbox();
            @include justify-content(center);
            @include align-items(center);
            > img {
              @include rect(0.5rem, 0.48rem);
            }
          }
          > p {
            font-size: 0.24rem;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: #191e2a;
          }
        }
      }
    }
    .content_all {
      @include rect(100%, 0.94rem);
      @include flexbox();
      @include justify-content(space-between);
      @include align-items(center);
      border-bottom: 1px solid #eff1f3;
      @include margin(0 0 0.24rem 0);
      .content_all_left {
        @include flexbox();
        @include align-items(center);
        > p {
          @include rect(0.06rem, 0.24rem);
          background: #f52e67;
          @include margin(0 0.13rem 0 0);
        }
        > span {
          font-size: 0.32rem;
          font-family: PingFang-SC-Heavy;
          font-weight: 800;
          color: #191e2a;
        }
      }
      .content_all_right {
        @include flexbox();
        @include align-items(center);
        > p {
          font-size: 0.28rem;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: #9fa0a5;
          @include margin(0 0.14rem 0 0);
        }
        > span {
          color: #9fa0a5;
        }
      }
    }
    .content_cloth {
      @include rect(100%, calc(100vh - 6.4rem));
      background: #fff;
      box-shadow: 0rem 0rem 0.92rem 0rem #b5b5b5;
      box-shadow: 0 0.02rem 0.24rem 0 rgba(0, 0, 0, 0.1);
      border-radius: 0.2rem;
      @include margin(0 0 0.35rem 0);
      overflow: hidden;
      .content_cloth_img {
        @include rect(100%, calc(100vh - 8.4rem));
        border-radius: 0.2rem 0.2rem 0 0;
        //background: url(../assets/timg.jpg) no-repeat;
        position: relative;
        z-index: 1;
        > img {
          position: relative;
          display: block;
          width: 100%;
          border-radius: 0.2rem 0.2rem 0 0;
          position: absolute;
          // right: 5%;
          // bottom: 10%;
          z-index: 1;
        }
        // >.mini-img{
        //   position: absolute;
        //   bottom: 0.5rem;
        //   right: 0.3rem;
        //   @include rect(0.8rem, 0.8rem);
        //   z-index: 99;
        // }
      }
      .content_cloth_money {
        position: relative;
        z-index: 2;
        @include rect(100%, 1rem);
        background: #22262f;
        opacity: 0.75;
        @include flexbox();
        @include padding(0 0.22rem 0);
        @include align-items(center);
        @include justify-content(space-between);
        > p {
          font-size: 0.24rem;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: #fff;
        }
        .content_cloth_money1 {
          > p {
            @include flexbox();
            @include align-items(center);
            @include justify-content(center);
            @include rect(1.27rem, 0.44rem);
            background: linear-gradient(
              -90deg,
              rgba(255, 109, 116, 1),
              rgba(245, 46, 103, 1),
              rgba(255, 83, 103, 1)
            );
            border-radius: 0.22rem;
            font-size: 0.24rem;
            font-family: PingFang-SC-Heavy;
            font-weight: 800;
            color: #fff;
          }
          > span {
            text-decoration: line-through;
            font-size: 0.16rem;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: #fff;
          }
        }
      }
      .content_cloth_detail {
        position: relative;
        z-index: 2;
        background: #fff;
        @include rect(100%, 1rem);
        @include flexbox();
        @include justify-content(space-around);
        @include align-items(center);
        .content_cloth_detail_one {
          @include flexbox();
          @include align-items(center);
          > img {
            @include rect(0.33rem, 0.33rem);
            @include margin(0 0.21rem 0 0);
          }
          > p {
            font-size: 0.22rem;
            font-family: PingFang-SC-Bold;
            font-weight: bold;
            color: #c5c7ce;
          }
          > span {
            font-size: 0.22rem;
            font-family: PingFang-SC-Bold;
            font-weight: bold;
            color: #f52e67;
          }
        }
        > a {
          font-size: 0.26rem;
          font-family: PingFang-SC-Bold;
          font-weight: bold;
          color: #f52e67;
        }
      }
    }
  }
  .shadow-vant{
    border-radius: 0.2rem;
    overflow: hidden;
  }
  .content_cloth_alert{
    width: 100%;
    .content_cloth_img{
      width: 100%;
      max-height: 6.8rem;
      overflow: hidden;
      >img{
        width: 100%;
      }
    }
    .title{
      width: 100%;
      font-size: 0.3rem;
      line-height: 1rem;
      padding: 0 0.2rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow:hidden;
    }
    .buy{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.2rem;
    }
    .money{
      padding: 0.1rem 0 0.3rem 0;
      >span{
        font-family: PingFang-SC-Medium;
        font-size: 0.42rem;
        color: #f52e67;
      }
      >span:last-of-type{
        text-decoration: line-through;
        color: #DADBDD;
        font-size: 0.3rem;
      }
    }
    .buy-button{
      padding: 0.1rem 0 0.3rem 0;
      >.button{
        width: 1.8rem;
        height: 0.6rem;
        line-height: 0.6rem;
        background: #f52e67;
        text-align: center;
        border-radius: 0.5rem;
        font-size: 0.3rem;
        font-weight: 600;
        color: #fff;
      }
    }
  }
}
.mini-img{
  position: absolute;
  @include rect(0.8rem, 0.8rem);
  z-index: 99;
  bottom: 4rem;
  right: 0.8rem;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .16), 0 0 6px rgba(0, 0, 0, .04);
  >img{
    width: 100%;
    height: 100%;
  }
}

.area{
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 222;
}
.areaShadow{
  position: absolute;
  top:0;
  height: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  z-index: 2;
}
</style>
